<template>
  <div class="timeline-body">
    <div v-for="(item, index) in cols" :key="index" class="timeline">
      <div v-if="index % 2 !== 0" class="time-content" :style="{ borderTop: index % 2 == 0 ? 'none' : '1px dashed #00f0ff' }" v-px-to-vw></div>
      <div v-for="(v, i) in item" :key="i" class="time-content" :style="index % 2 !== 0 && i === item.length - 1 ? 'border-left: none;' : ''">
        {{ v?.content }}
        <div style="margin-top: 2px; font-size: 10px" v-px-to-vw>{{ v?.date }}</div>
      </div>
      <div v-if="index % 2 == 0" class="timeline-bottom time-content"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  steps: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const Index = 4;
const cols = ref([]);
watch(
  () => props.steps,
  (newVal) => {
    const arr = newVal || [];
    const newArr = arr.reduce((result, item, index) => {
      if (index % 4 === 0) {
        result.push(arr.slice(index, index + 4));
      }
      return result;
    }, []);
    newArr[newArr.length - 1].length = 4;
    cols.value = newArr;
  },
  { immediate: true }
);
</script>
<style scoped lang="scss">
.timeline-body {
  height: 100%;
  width: fit-content;
  display: flex;
  position: relative;
  padding: 20px 10px 0 10px;
  box-sizing: border-box;
  font-size: 12px;
  flex-wrap: nowrap;
}
.timeline {
  width: 120px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.timeline-bottom {
  border-top: 1px dashed #00f0ff;
  border-left: none !important;
}
.time-content {
  flex: 1;
  width: 100%;
  border-left: 1px dashed #00f0ff;
  padding-left: 10px;
  box-sizing: border-box;
  position: relative;
}
.time-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #00f0ff;
  border-radius: 50%;
}
</style>
